<template>
    <view>
        <uni-card v-if="isDraft" padding="0" spacing="0">
            <template slot="cover">
                <view class="relative">
                    <image class="w-full h-40 bg-gray-200" mode="aspectFill"
                        :src="draft.carousel[0] ? draft.carousel[0] : imgUrl">
                    </image>
                    <view class="absolute bottom-1 left-0 w-full bg-opacity-70 bg-gray-800 uni-pa-3">
                        <text class="uni-white">{{ draft.title }}</text>
                    </view>
                </view>
            </template>
            <!-- 遮罩层绑定点击事件 原因：image -->
            <view @click="goto('/pages/note/draft')" class="draft absolute top-0 left-0 w-full h-full">
                <view class="z-50 w-full h-full flex flex-col justify-center items-center text-center absolute">
                    <uni-icons type="compose" size="30" color="#fff"></uni-icons>
                    <text class="text-white">草稿待发布</text>
                </view>
            </view>
        </uni-card>
    </view>
</template>

<script>
export default {
    data() {
        return {
            isDraft: false,
            draft: {},
            imgUrl: '../../static/img/bg-2.jpg',
        }
    },
    created() {
        // 获取草稿
        this.getDraft()
    },
    methods: {
        goto(url) {
            uni.navigateTo({
                url,
            })
        },
        // 获取草稿
        getDraft() {
            uni.getStorage({
                key: 'draft_key',
                success: (res) => {
                    this.isDraft = true
                    this.draft = {
                        ...res.data,
                        carousel: JSON.parse(res.data.carousel),
                        topic: JSON.parse(res.data.topic),
                    }
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.draft::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background: gray;
    opacity: .7;
}
</style>